<template>
    <div class="main-content">
      <div class="main-header">
        <h2>编辑地点信息</h2>
      </div>
      <div class="main-section">
        <div class="card">
          <input v-model="location.name" type="text" placeholder="地点名称">
          <button @click="saveLocation">保存</button>
          <button @click="deleteLocation">删除</button>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'LocationEditPage',
    props: {
      // 修改为 locationName
      locationName: { 
        type: String, 
        required: true 
      }
    },
    data() {
      return {
        location: {}
      };
    },
    mounted() {
      this.fetchLocation();
    },
    methods: {
      fetchLocation() {
        // 根据 locationName 获取具体的 location 信息
        fetch(`/ShowLocation/${this.locationName}`) 
          .then(response => response.json())
          .then(data => {
            this.location = data;
          })
          .catch(error => {
            console.error('获取地点信息失败:', error);
          });
      },
      saveLocation() {
        // 保存修改后的 location 信息
        fetch(`/UpdateLocation/${this.locationName}`, { 
          method: 'PUT',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(this.location)
        })
        .then(response => response.json())
        .then(data => {
          console.log('地点信息已保存:', data);
          // 保存成功后返回列表页面
          this.$router.push('/locations');
        })
        .catch(error => {
          console.error('保存地点信息失败:', error);
        });
      },
      deleteLocation() {
        // 删除当前 location
        fetch(`/DeleteLocation/${this.locationName}`, { 
          method: 'DELETE'
        })
        .then(response => {
          console.log('地点信息已删除');
          // 删除成功后返回列表页面
          this.$router.push('/locations');
        })
        .catch(error => {
          console.error('删除地点信息失败:', error);
        });
      }
    }
  };
  </script>
  
  <style scoped>
  /* 样式可以根据需要进行调整 */
  .main-content {
    flex: 1;
    padding: 20px;
    max-width: 1200px; 
    margin: 0 auto; 
  }
  
  .main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .main-header h2 {
    font-size: 24px;
  }
  
  .main-section {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }
  
  .card {
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 20px;
    display: block; 
    text-align: left; 
    width: 100%;
    margin: 0 auto;
  }
  </style>